<!-- 新增区域弹窗 -->
<template>
    <a-modal :maskClosable="false" title="新增区域" centered :destroyOnClose="true" :width="500" v-model="visible"
        @ok="handleAddArea">
        <p>请选择本阶段展示区域</p>
        <a-checkbox-group @change="onChange" :defaultValue="checkedArea">
            <a-row>
                <a-col :span="12" v-for="item in typeList" :key="item.id">
                    <a-checkbox :value="item.id" :disabled="checkedArea.includes(item.id)" style="margin: 15px">{{item.name}}</a-checkbox>
                </a-col>
            </a-row>
        </a-checkbox-group>
    </a-modal>
</template>

<script>
import { customModuleTypeList } from '@/api/member/member'
export default {
    props: ['checkedArea'],
    components: {},
    data() {
        return {
            visible: false,
            typeList: [],
            typeObj: {},
            checkedValues: [],
        }
    },
    computed: {},
    watch: {
        // checkedArea(val){
        //     console.log('选中区域改变--->', val)
        // }
    },
    methods: {
        show(){
            this.visible = true  
            this.checkedValues = this.checkedArea
        },
        async getCustomModuleTypeList(){
            let res = await customModuleTypeList()
            this.typeList = res.data || []
            this.typeList.forEach(item => {
                this.typeObj[item.id] = item
            })
        },
        onChange(checkedValues){
            this.checkedValues = checkedValues
        },
        handleAddArea(){
            // console.log('this.checkedValues--->', this.checkedValues)
            let newArea = this.checkedValues.filter(v => !this.checkedArea.includes(v)).map(id => {
                return this.typeObj[id]
            })
            this.$emit('add', newArea)
            this.visible = false
            // console.log('newArea--->', newArea)
        }
    },
    created() {
        this.getCustomModuleTypeList()
    },
    mounted() {

    },
}
</script>
<style scoped>

</style>